<template>
  <div class="common-layout">
    <el-container class="containers">
      <!-- 导航 -->
      <!-- <el-aside class="asides"> -->
      <el-menu
        :default-active="activePath"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        active-text-color="#ffd04b"
        background-color="#2c424e"
        text-color="#fff"
        router="true"
        @select="handleSelect"
      >
        <div
          style="
            text-align: center;
            padding: 15px 0;
            background-color: #1f2f37;
            color: aliceblue;
          "
        >
          五月的天
        </div>
        <el-menu-item index="/home" @click="menusclick('首页')">
          <el-icon><HomeFilled /></el-icon>
          <template #title>首页</template>
        </el-menu-item>

        <el-sub-menu index="/sync">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/sync/user" @click="menusclick('用户管理')">
            <el-icon><setting /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/sync/role" @click="menusclick('角色管理')">
            <el-icon><Location /></el-icon>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/sync/menus" @click="menusclick('菜单管理')">
            <el-icon><icon-menu /></el-icon>
            <span>菜单管理</span>
          </el-menu-item>
          <el-menu-item index="/sync/bumen" @click="menusclick('部门管理')">
            <el-icon><HomeFilled /></el-icon>
            <span>部门管理</span>
          </el-menu-item>
          <el-menu-item index="/sync/zidian" @click="menusclick('字典管理')">
            <el-icon><Location /></el-icon>
            <span>字典管理</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- <el-sub-menu
          v-for="item in routesMenus"
          :key="item.path"
          :index="item.path"
        >
          <template #title>
            <el-icon><component :is="item.meta.icon"></component></el-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item
            v-for="items in item.children"
            :key="items.path"
            :index="items.path"
          >
            <el-icon>
              <component :is="items.meta.icon"></component>
            </el-icon>
            <span>{{ items.meta.title }}</span>
          </el-menu-item>
        </el-sub-menu> -->
      </el-menu>
      <!-- </el-aside> -->
      <el-container class="containera">
        <!-- 头部 -->
        <el-header class="headers">
          <div style="display: flex; align-items: center">
            <el-icon @click="isCollapse = !isCollapse" class="topicon">
              <Expand v-show="isCollapse" />
              <Fold v-show="!isCollapse" />
            </el-icon>
            <!-- 面包屑 -->
            <el-breadcrumb
              separator="/"
              class="breadcrumbs"
              v-show="route.matched.length == 2"
            >
              <el-breadcrumb-item :to="{ path: '/' }">
                首页
              </el-breadcrumb-item>
            </el-breadcrumb>
            <el-breadcrumb
              separator="/"
              class="breadcrumbs"
              v-show="route.matched.length != 2"
            >
              <el-breadcrumb-item
                v-for="item in route.matched"
                :key="item.path"
                :to="{ path: item.path }"
              >
                {{ item.meta.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div style="display: flex; align-items: center; height: 100%">
            <el-dropdown class="el-dropdowns" trigger="click">
              <span class="el-dropdown-link">
                <img src="../components/24gl-fullScreenEnter2.png" alt="" />
              </span>
            </el-dropdown>
            <!-- 布局大小 -->
            <el-dropdown class="el-dropdowns" trigger="click">
              <span class="el-dropdown-link">
                <img src="../components/小字体.png" alt="" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>默认</el-dropdown-item>
                  <el-dropdown-item>大型</el-dropdown-item>
                  <el-dropdown-item>小型</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- 中文 -->
            <el-dropdown class="el-dropdowns" trigger="click">
              <span class="el-dropdown-link">
                <img src="../components/中文显示.png" alt="" />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>中文</el-dropdown-item>
                  <el-dropdown-item>English</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- 注销 -->
            <el-dropdown class="el-dropdowns" trigger="click">
              <span class="el-dropdown-link">
                <div class="flex items-center">
                  <el-avatar
                    class="mr-3"
                    :size="30"
                    src="https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif?imageView2/1/w/80/h/80"
                  />
                  <span class="mr-4">{{ userName }}</span>
                </div>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>项目地址</el-dropdown-item>
                  <el-dropdown-item>项目文档</el-dropdown-item>
                  <el-dropdown-item divided @click="zhuxiao"
                    >注销登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- 设置 -->
            <div class="el-dropdowns el-dropdown-link" @click="table = true">
              <img src="../components/设置 (1).png" alt="" />
            </div>
            <el-drawer v-model="table" title="项目配置" direction="rtl">
              <div
                style="
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <el-switch
                  v-model="isDark"
                  :active-icon="Moon"
                  :inactive-icon="Sunny"
                  size="large"
                />
              </div>
            </el-drawer>
          </div>
        </el-header>
        <!-- tabs -->
        <div class="headertable">
          <el-tag
            v-for="tag in dynamicTags"
            :key="tag.path"
            :closable="tag.title != '首页'"
            :disable-transitions="false"
            @close="handleClose(tag)"
            @click="changeTags(tag)"
            class="tags"
            :effect="tag.isliang ? 'dark' : 'plain'"
            :type="tag.isliang ? 'primary' : 'info'"
            size="large"
          >
            {{ tag.title }}
          </el-tag>
        </div>
        <!-- 内容 -->
        <el-main style="background-color: #f1f1f1">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Fold,
  Expand,
  HomeFilled,
  ArrowDown,
} from "@element-plus/icons-vue";
import { ElDrawer, ElMessageBox } from "element-plus";
import { logout, getUserInfo, getMenu } from "@/api/auth/index";
import { useRoute, useRouter } from "vue-router";
import { User, Lock, Checked, Sunny, Moon } from "@element-plus/icons-vue";
// 暗黑模式
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark();

const routesMenus = ref();
// 获取菜单
function getRoutesMenus() {
  getMenu().then((res) => {
    routesMenus.value = res.data;
    // console.log(routesMenus.value);
  });
}
const userName = ref(); //当前用户名
// 获取当前用户名
function getUsername() {
  getUserInfo().then((res) => {
    // console.log(res.data.username);
    userName.value = res.data.username;
  });
}
let router = useRouter();
let route = useRoute();
const activePath = ref();
function getactivePath() {
  // console.log(route.matched);
  activePath.value = route.path;
}
onMounted(() => {
  getUsername();
  getRoutesMenus();
  getactivePath();
});
const isCollapse = ref(false); //水平收起

// 点击菜单
const tagObj = ref({
  title: "",
  isliang: true,
  path: "",
});

const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key);
  tagObj.value.path = key;
};

const menusclick = (aaa: any) => {
  tagObj.value.title = aaa;
  // console.log(tagObj.value.path, tagObj.value.title);
  if (dynamicTags.value.some((item) => item.path == tagObj.value.path)) {
    dynamicTags.value.forEach((item) => {
      if (item.title == tagObj.value.title) {
        item.isliang = true;
      } else {
        item.isliang = false;
      }
    });
  } else {
    dynamicTags.value.push({
      title: tagObj.value.title,
      isliang: true,
      path: tagObj.value.path,
    });
    dynamicTags.value.forEach((item) => {
      if (item.title == tagObj.value.title) {
        item.isliang = true;
      } else {
        item.isliang = false;
      }
    });
  }
};
// 设置
const table = ref(false);

// 注销登录
const zhuxiao = () => {
  ElMessageBox.confirm("是否注销登录", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    logout().then((res: any) => {
      // console.log(res);
      if (res.code == "00000") {
        setTimeout(() => {
          router.push("/login");
          localStorage.removeItem("accessToken");
        }, 500);
      }
    });
  });
};

// tag
const dynamicTags = ref([
  {
    title: "首页",
    isliang: true,
    path: "/home",
  },
]);
// 点击关闭
const handleClose = (tag: any) => {
  // console.log(tag);
  dynamicTags.value.splice(
    dynamicTags.value.findIndex((item) => item.path == tag.path),
    1
  );
  if (tag.isliang == true) {
    tagObj.value = { ...dynamicTags.value[dynamicTags.value.length - 1] };
    router.push(tagObj.value.path);
    dynamicTags.value.forEach((item) => {
      if (item.title == tagObj.value.title) {
        item.isliang = true;
      } else {
        item.isliang = false;
      }
      activePath.value = tagObj.value.path;
    });
  }
};
const changeTags = (tag: any) => {
  // console.log(tag);
  router.push(tag.path); //跳转
  dynamicTags.value.forEach((item) => {
    if (item.title == tag.title) {
      item.isliang = true;
    } else {
      item.isliang = false;
    }
  });
  activePath.value = tag.path;
};
</script>

<style scoped>
.containers {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.el-menu-vertical-demo {
  background-color: #2c424e;
  /* width: 100%; */
  height: 100%;
}

.containera {
  height: 100%;
  flex: 1;
}
.headers {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topicon {
  font-size: 22px;
  margin-right: 18px;
}
.breadcrumbs {
  font-size: 16px;
}
.headertable {
  border: 1px solid #ccc;
  width: 100%;
  height: 45px;
  padding: 2px 20px;
  display: flex;
  align-items: center;
}
.el-dropdowns {
  height: 100%;
  color: #222222;
}
.el-dropdowns:hover {
  background-color: #e2e2e2;
  border: none;
}
.el-dropdown-link {
  height: 100%;
  cursor: pointer;
  /* color: var(--el-color-primary); */
  display: flex;
  align-items: center;
  padding: 0 15px;
  border: none;
  justify-content: center;
}
.el-dropdown-link img {
  width: 100%;
  height: 40%;
}
.items-center {
  display: flex;
  height: 100%;
  align-items: center;
}
.mr-4 {
  font-size: 18px;
  margin-left: 9px;
  color: #000;
}
.tags {
  margin-right: 6px;
  cursor: pointer;
  font-size: 15px;
}
</style>
